<template>
	<div class="modal">
		<div class="number-view">
			<div v-for="item in numList">
				<Button class="num" @click="clickAction(item)">{{item}}</Button>
			</div>
		</div>
		<div class="price-view">
			<div v-for="item in priceList">
				<Button class="price" @click="clickAction(item)">￥<span>{{item}}</span></Button>
			</div>
		</div>
		<div class="action-view">
			<div class="action">
				<Button class="del" @click="clickAction('del')">删除</Button>
			</div>
			<div class="action">
				<Button class="clear" @click="clickAction('clear')">清除</Button>
			</div>
			<div class="action">
				<Button class="sure" @click="clickAction('sure')">确定</Button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			numList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '00', '.'],
			priceList: [100, 200, 500, 1000]
		}
	},
	methods: {
		clickAction(item) {
			this.$emit('on-click-action', item)
		}
	}
}
</script>

<style scoped lang="less">
.modal {
	width: 4.3rem;
	height: 2.7rem;
	padding: .2rem;
	background: #FFFFFF;
	box-shadow: 0 0 12px 0 rgba(51,51,51,0.30);
	display: flex;
	.number-view {
		width: 2.3rem;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-right: .1rem;
		.num {
			width: .6rem;
			background: #F3EFF1;
			border: 1px solid #D5CED2;
			border-radius: 5px;
		}
	}
	.price-view {
		width: .9rem;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-right: .1rem;
		.price {
			width: .9rem;
			background: #F3EFF1;
			border: 1px solid #D5CED2;
			border-radius: 5px;
		}
	}
	.action-view {
		width: .8rem;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		.action {
			.del{
				background: #F3EFF1;
				border: 1px solid #D5CED2;
				border-radius: 5px;
			}
			.clear {
				background: #F3EFF1;
				border: 1px solid #D5CED2;
				border-radius: 5px;
			}
			.sure {
				height: 1.1rem;
				text-align: center;
				background: #CD2A86;
				border-radius: 5px;
				color: #fff;
			}
		}
	}
}
</style>